<template>
  <div>
   <div class="btns">
     <el-button type="primary" @click="change(10)" plain>最近10条数据</el-button>
     <el-button type="primary" @click="change(50)" plain>最近50条数据</el-button>
     <el-button type="primary" @click="change(100)" plain>最近100条数据</el-button>
     <el-button type="success" @click="change(-1)" round>实时数据</el-button>
     <el-statistic
       v-for="item in dataList"
       :value="item.data"
       :title="item.name"
     >
       <template slot="formatter">
         {{item.data}}
       </template>
     </el-statistic>
   </div>
  </div>
</template>

<script>
import {queryDeviceProperty} from "@/api/IOT/index"
export default {
  name: "TopController",
  data(){
    return {
      dataList:[
        {
          name:"湿度值",
          p:"h_str",
          data:null,
        },
        {
          name:"温度值",
          p:"t_str",
          data:null,

        },
        {
          name:"光照值",
          p:"l_str",
          data:null,

        },
        {
          name:"烟雾值",
          p:"s",
          data:null,

        },
        {
          name:"火焰值",
          p:"f",
          data:null,

        },
        {
          name:"烟雾阈值",
          p:"S_S",
          data:null,

        },
        {
          name:"温度阈值",
          p:"T_T",
          data:null,

        },


      ],
      timer:null
    }
  },

  created() {
    this.getData()
    this.timer = setInterval(()=>{
      this.getData()
    },1000 * 3)
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods:{
    change(val){
      this.$emit("change",val)
    },
    getData(){
      queryDeviceProperty().then(res=>{
        let data = res.data
        data.forEach(item=>{
          let index = this.dataList.findIndex(item2=>item2.p == item.properties)
          if(index != -1){
            this.dataList[index].data = item.value
          }

        })
      })
    }
  }
}
</script>

<style scoped>
.btns {
  margin: 10px ;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.el-statistic {
  width: auto;
  margin: 0 20px;
}
</style>
